<template>
  <div class="e-wrap">
    <w-form-validate @on-validate="submitSave">
      <div class="e-item">
        <span class="title">网站名称</span>
        <div class="dis-block">
            <w-input :holder="`请填写`" rule="isEmpty" error="*此项必填" v-model="baseInfo.websiteName" ></w-input>
        </div>
      </div>
      <div class="e-item">
        <span class="title">Powered信息</span>
        <div class="dis-block">
          <w-input :holder="`请填写`" rule="isEmpty" error="*此项必填" v-model="baseInfo.poweredby"></w-input>
        </div>
      </div>
      <div class="e-item">
        <span class="title">公司名称</span>
        <div class="dis-block">
          <w-input :holder="`请填写`" rule="isEmpty" error="*此项必填" v-model="baseInfo.company"></w-input>
        </div>
      </div>
      <div class="e-item">
        <span class="title">网站标题</span>
        <div class="dis-block">
          <w-input :holder="`请填写`" rule="isEmpty" error="*此项必填" v-model="baseInfo.title"></w-input>
        </div>
      </div>
      <div class="e-item">
        <span class="title">网站网址</span>
        <div class="dis-block">
          <w-input :holder="`请填写`" rule="isEmpty" error="*此项必填|*网址输入有误" v-model="baseInfo.address"></w-input>
        </div>
      </div>
      <div class="e-item">
        <span class="title">热门搜索</span>
        <div class="dis-block">
          <w-input :holder="`请填写`" rule="isEmpty" error="*此项必填" v-model="baseInfo.hotSearch"></w-input>
        </div>
      </div>
      <div class="e-item">
        <span class="title">站点状态</span>
        <div class="dis-block">
          <span style="margin-right:80px;">
              <w-radio name='update' :label='1' v-model="baseInfo.websiteState">是</w-radio>
          </span>
          <w-radio name='update' :label='0' v-model="baseInfo.websiteState">否</w-radio>
        </div>
      </div>
      <div class="e-item">
        <span class="title" style="vertical-align: top;margin-top: 10px;">关闭原因</span>
        <div class="dis-block">
          <w-input type='textarea' :holder="`请填写`" rule="isEmpty" error="*此项必填" v-model="baseInfo.closeCause"></w-input>
        </div>
      </div>
      <!-- 保存按钮 -->
      <div class="save-btn">
        <button type="submit">保存</button>
      </div>
    </w-form-validate>
  </div>
</template>

<script>
import { apiSystemMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      // 查询基本信息 -- 参数
      queryParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || ''
      },
      baseInfo: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: 3,
        address: '',
        closeCause: '',
        company: '',
        hotSearch: '',
        poweredby: '',
        title: '',
        websiteName: '',
        websiteState: ''
      }
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    this._getBaseInfo()
  },
  methods: {
    _getBaseInfo() {
      this.queryParams.accessToken = this.token
      apiSystemMange.queryBaseInfo(this.queryParams).then(data => {
        if (data.code != '200') return
        this.baseInfo.id = data.data.id
        this.baseInfo.address = data.data.address
        this.baseInfo.closeCause = data.data.closeCause
        this.baseInfo.company = data.data.company
        this.baseInfo.hotSearch = data.data.hotSearch
        this.baseInfo.poweredby = data.data.poweredby
        this.baseInfo.title = data.data.title
        this.baseInfo.websiteName = data.data.websiteName
        this.baseInfo.websiteState = data.data.websiteState
      })
    },
    submitSave() {
      this.baseInfo.accessToken = this.token
      this.baseInfo.websiteState = Boolean(Number(this.baseInfo.websiteState))
      apiSystemMange.saveBaseInfo(this.baseInfo).then(data => {
        if (data.code != '200') return
        this.$toast('保存成功', () => {
          this._getBaseInfo()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.e-wrap {
    width: 450px;
    margin: 30px auto;
    .e-item {
      display: block;
      margin-bottom: 20px;
      margin-left: 0;
      .title {
        width: 76px;
        margin-right: 19px;
      }
      .dis-block {
        width: 320px;
        vertical-align: middle;
        .imgBox {
          display: inline-block;
          width: 54px;
          height: 54px;
          border: 1px solid $border-gray;
        }
      }
    }
    .save-btn {
      text-align: center;
      margin-top: 30px;
      button {
        width: 140px;
        height: 32px;
        color: #fff;
        background: $color-main;
        border-radius: 5px;
      }
    }
}
</style>